<template>
  <div class="wrap">
   
    <div class="form">
       <img src="../assets/loginLogo.png" class="logo" alt />
      <div class="item">
        <img src="../assets/loginPhone.png" class="phone" alt />
        <input type="text" v-model="account" placeholder="请输入用户名" />
      </div>
      <div class="item">
        <img src="../assets/pass.png" class="pass" alt />
        <input type="password" v-model="password" placeholder="请输入密码" />
      </div>
      <p class="w_pass" @click="wpass">忘记密码？</p>
      <div class="btnBox">
        <button class="login" @click="login">登陆</button>
        <button @click="register">注册</button>
      </div>
    </div>
     <p class="ccc">
      登陆即代表你同意
      <span style="color:rgb(85,178,252)" @click="dialogVisible">《捷报订单许可及服务协议》</span>
    </p>
  </div>
</template>
<style scoped lang="scss">
.ccc {
  font-size: 12px;
  width: 100%;
  line-height: 30px;
 
  span {
    cursor: pointer;
  }
}
.wrap {
      position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100vh;
  .logo {
    width: 3.426667rem;
    margin: 1rem auto 1rem;
  }
  .item {
    width: 6.733333rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #719bef;
    height: 1.44rem;
    .phone {
      width: 0.533333rem;
      height: 0.533333rem;
      display: block;
    }
    .pass {
      width: 0.466667rem;
      height: 0.533333rem;
      display: block;
    }
    input {
      display: block;
      outline: none;
      border: none;
      flex: 2;
      margin-left: 15px;
      height: 90%;
      color: #719bef;
    }
  }
  .w_pass {
    color: #719bef;
    text-align: left;
    width: 6.733333rem;
    margin: 15px auto;
  }
  .btnBox {
    margin-top: 1rem;
    height: 4rem;
    button {
      height: 1.133333rem;
      width: 6.813333rem;
      border: 1px solid rgba(113, 155, 239, 1);
      border-radius: 30px;
      background: transparent;
      color: #719bef;
      outline: none;
      font-size: 16px;
    }
    .login {
      color: #fff;
      background: #719bef;
      margin-bottom: 0.733333rem;
    }
  }
}
</style>
<script>
import { login, findUserInfo } from "@/utils/interface";
import { Dialog } from "vant";

export default {
  data() {
    return {
      account: "",
      password: "",
      heightChange: true,
      docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      showHeight: document.documentElement.clientHeight //实时屏幕高度
    };
  },
  watch: {
    showHeight() {
      if (this.docmHeight > this.showHeight) {
        this.heightChange = false;
      } else {
        this.heightChange = true;
      }
    }
  },
  created() {
    document.title = "登陆";
  },
  methods: {
    dialogVisible() {
      this.$router.push("/xiyi");
    },
    login() {
      if (!this.account) {
        Dialog.alert({
          message: "请输入账号"
        });
        return false;
      }
      if (!this.password) {
        Dialog.alert({
          message: "请输入密码"
        });
        return false;
      }
      login({ account: this.account, password: this.password }).then(res => {
        console.log(res.data);
        if (res.data.code == 200) {
          localStorage.setItem("shopwx", res.data.data.jsessionid);
          findUserInfo().then(res => {
            localStorage.setItem("userInfo", JSON.stringify(res.data.data));
            this.$router.replace("/");
          });
        }
      });
    },
    register() {
      this.$router.push("/register");
    },
    wpass() {
      this.$router.push("/wpass");
    }
  },
  mounted() {
    window.onresize = () =>
      (() => {
        this.showHeight = document.body.clientHeight;
      })();
  }
};
</script>